import 'package:childrenapp/buy.dart';
import 'package:childrenapp/home.dart';
import 'package:childrenapp/home_page.dart';
import 'package:flutter/material.dart';

class Settlement extends StatefulWidget {
  const Settlement({super.key});

  @override
  State<Settlement> createState() => _SettlementState();
}

class _SettlementState extends State<Settlement> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 60),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) {
                        return Buy();
                      }));
                    },
                    child: const Center(
                      child: Image(
                        image: AssetImage(
                          'images/Icon/Arrow - Left 3.png',
                        ),
                        width: 30,
                        height: 30,
                      ),
                    ),
                  ),
                ),
                Container(
                  child: Text(
                    'Payment',
                    style: TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
                  ),
                ),
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                    child: Image(
                      image: AssetImage(
                        'images/Icon/more vertical.png',
                      ),
                      width: 30,
                      height: 30,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
                flex: 2,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    set_cell(
                      images: 'images/Icon/mastercard.png',
                      text: 'Credit Card',
                      whether: true,
                    ),
                    set_cell(
                      images: 'images/Icon/paypal.png',
                      text: 'Credit Card',
                    ),
                    set_cell(
                      images: 'images/Icon/apple.png',
                      text: 'Credit Card',
                    ),
                  ],
                )),
            Expanded(
              flex: 2,
              child: Column(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Container(
                        margin: EdgeInsets.symmetric(vertical: 10),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Card Number',
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.w600),
                        ),
                      ),
                      Container(
                        height: 60,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color.fromRGBO(245, 245, 245, 1.0),
                        ),
                        child: Container(
                          margin: EdgeInsets.symmetric(horizontal: 15),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '12 34 56 78 90 10',
                                style: TextStyle(
                                    color: Color.fromRGBO(143, 143, 143, 1.0),
                                    fontSize: 18),
                              ),
                              Image(
                                image: AssetImage('images/Icon/mastercard.png'),
                                width: 35,
                                height: 35,
                              )
                            ],
                          ),
                        ),
                      ),
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(top: 20, bottom: 10),
                                  width:
                                      (MediaQuery.of(context).size.width - 60) /
                                          2,
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    'Expire Date',
                                    style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.w600),
                                  ),
                                ),
                                Container(
                                  width:
                                      (MediaQuery.of(context).size.width - 60) /
                                          2,
                                  height: 60,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(245, 245, 245, 1.0),
                                  ),
                                  child: Row(
                                    children: [
                                      Container(
                                        margin:
                                            EdgeInsets.only(left: 15, right: 5),
                                        child: Image(
                                          image: AssetImage(
                                              'images/Icon/Calendar.png'),
                                          width: 20,
                                          height: 20,
                                        ),
                                      ),
                                      Text(
                                        '07/11/2021',
                                        style: TextStyle(
                                            color: Color.fromRGBO(
                                                143, 143, 143, 1.0),
                                            fontSize: 18),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(top: 20, bottom: 10),
                                  width:
                                      (MediaQuery.of(context).size.width - 60) /
                                          2,
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    'CVC',
                                    style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.w600),
                                  ),
                                ),
                                Container(
                                  width:
                                      (MediaQuery.of(context).size.width - 60) /
                                          2,
                                  height: 60,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(245, 245, 245, 1.0),
                                  ),
                                  child: Row(
                                    children: [
                                      Container(
                                        margin:
                                            EdgeInsets.only(left: 15, right: 5),
                                        child: Image(
                                          image: AssetImage(
                                              'images/Icon/Lock.png'),
                                          width: 20,
                                          height: 20,
                                        ),
                                      ),
                                      Container(
                                        width: 85,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                            Container(
                                              height: 10,
                                              width: 10,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Color.fromRGBO(
                                                    143, 143, 143, 1.0),
                                              ),
                                            ),
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(),
                ],
              ),
            ),
            Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Total:',
                                style: TextStyle(
                                    fontSize: 22, fontWeight: FontWeight.w300),
                              ),
                              Text(
                                '\$43.00',
                                style: TextStyle(
                                    fontSize: 22, fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: 1,
                            color: Color.fromRGBO(179, 179, 179, 1.0),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 30),
                      width: MediaQuery.of(context).size.width - 40,
                      height: 60,
                      child: ElevatedButton(
                        onPressed: () {
                          // 点击按钮时弹出对话框
                          showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return AlertDialog(
                                title: Text('提示'),
                                content: Text('支付成功'),
                                actions: <Widget>[
                                  TextButton(
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                      Navigator.push(context,
                                          MaterialPageRoute(builder: (context) {
                                        return Home_Page();
                                      })); // 关闭对话框
                                    },
                                    child: Text('关闭'),
                                  ),
                                ],
                              );
                            },
                          );
                        },
                        child: Text(
                          'Payment',
                          style: TextStyle(fontSize: 22),
                        ),
                        style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                              RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15))),
                          backgroundColor: MaterialStateProperty.all(
                            Color.fromRGBO(51, 51, 51, 1.0),
                          ),
                        ),
                      ),
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }
}

class set_cell extends StatelessWidget {
  const set_cell({
    super.key,
    required this.images,
    required this.text,
    this.whether = false,
  });

  final String images;
  final String text;
  final bool whether;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(left: 20),
            height: 80,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Color.fromRGBO(245, 245, 245, 1.0),
            ),
            child: Row(
              children: [
                Image(
                  image: AssetImage(images),
                  height: 45,
                  width: 45,
                ),
                Container(
                  padding: EdgeInsets.all(15),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        text,
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w600),
                      ),
                      Text(
                        '12 34 **** 56 78',
                        style: TextStyle(
                            fontSize: 12,
                            color: Color.fromRGBO(143, 143, 143, 1.0)),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    // color: Colors.black,
                    child: Checkbox(
                      value: whether,
                      onChanged: (Value) {},
                      activeColor: Colors.black,
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
